<template>
  <view class="demo-sku">
    <button @tap="show = true">打开 SKU 选择器</button>
    
    <fu-sku
      :show="show"
      :goods="goods"
      :specs="specs"
      :skus="skus"
      @close="show = false"
      @add-cart="onAddCart"
      @buy-now="onBuyNow"
    ></fu-sku>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      // 商品信息
      goods: {
        id: 1,
        title: 'Apple iPhone 15 Pro Max',
        image: 'https://cdn.uviewui.com/uview/goods/5.jpg',
        price: 9999.00,
        stock: 999
      },
      // 规格列表
      specs: [
        {
          name: '颜色',
          values: ['原色钛金属', '蓝色钛金属', '黑色钛金属', '白色钛金属']
        },
        {
          name: '容量',
          values: ['256GB', '512GB', '1TB']
        }
      ],
      // SKU 列表
      skus: [
        {
          id: 1,
          specs: {
            颜色: '原色钛金属',
            容量: '256GB'
          },
          price: 9999.00,
          stock: 100,
          image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
        },
        {
          id: 2,
          specs: {
            颜色: '原色钛金属',
            容量: '512GB'
          },
          price: 11999.00,
          stock: 50,
          image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
        },
        {
          id: 3,
          specs: {
            颜色: '蓝色钛金属',
            容量: '256GB'
          },
          price: 9999.00,
          stock: 80,
          image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
        },
        {
          id: 4,
          specs: {
            颜色: '黑色钛金属',
            容量: '256GB'
          },
          price: 9999.00,
          stock: 60,
          image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
        },
        {
          id: 5,
          specs: {
            颜色: '白色钛金属',
            容量: '512GB'
          },
          price: 11999.00,
          stock: 40,
          image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
        }
      ]
    }
  },
  
  methods: {
    onAddCart(data) {
      console.log('加入购物车:', data)
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      })
      this.show = false
    },
    
    onBuyNow(data) {
      console.log('立即购买:', data)
      uni.showToast({
        title: '跳转到结算页',
        icon: 'none'
      })
      this.show = false
    }
  }
}
</script>

<style lang="scss">
.demo-sku {
  padding: 30rpx;
  
  button {
    background: #ff4444;
    color: #fff;
    border-radius: 12rpx;
    font-size: 28rpx;
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style> 